import { ref, watch } from 'vue'
import {LCS} from "../three/src/3d/lib/util/ToolMethods.js";
import {ElInput, ElButton, ElTooltip} from "../lib/element-plus@2.8.4/index.full.min.mjs";
import {Search} from "../lib/@element-plus/icons-vue@2.3.1/index.js";

export const colorsData0 = [
  {
    name: 'Yellow',
    colors: [
      ['87', '08E51', '#eea814'],
      ['88', '08E53', '#feb402'],
      ['81', '08C40', '#5c5146'],
      ['103', '10B27', '#5c5343'],
      ['109', '10C39', '#66583e'],
      ['80', '08C39', '#6d553c'],
      ['85', '08D45', '#8c6439'],
      ['79', '08C37', '#9f7944'],
      ['84', '08D44', '#ad7b36'],
      ['90', '08E56', '#cc8d26'],
      ['83', '08D43', '#c8903c'],
      ['82', '08D41', '#efc484'],
      ['86', '08E49', '#eed7b6'],
      ['116', '10E51', '#e9bf28'],
      ['118', '10E55', '#f9cd1b'],
      ['117', '10E53', '#eecd10'],
      ['115', '10E50', '#f3d66b'],
      ['110', '10D41', '#f0d684'],
      ['108', '10C37', '#94803e'],
      ['113', '10D45', '#988237'],
      ['112', '10D44', '#b69731'],
      ['119', '10E56', '#d1ab17'],
      ['111', '10D43', '#c6a93b'],
      ['107', '10C35', '#c1ab68'],
      ['114', '10E49', '#e9e2a6'],
      ['128', '12C31', '#e7e7c1'],
      ['102', '10B25', '#756f5c'],
      ['101', '10B23', '#8d856e'],
      ['100', '10B21', '#a39b84'],
      ['99', '10B19', '#bbb196'],
      ['98', '10B17', '#d3c9ac'],
      ['120', '12B15', '#e3e3cf'],
      ['106', '10C33', '#e7d59e'],
      ['105', '10C31', '#f0e2c1'],
      ['76', '08C31', '#f0dfc4'],
      ['97', '10B15', '#f0e7d5'],
    ],
  }, {
    name: 'Orange',
    colors: [
      ['65', '06E55', '#e86833'],
      ['64', '06E53', '#f78920'],
      ['89', '08E55', '#fe9f0d'],
      ['63', '06E51', '#f7935b'],
      ['62', '06E50', '#febc79'],
      ['56', '06C39', '#76533d'],
      ['61', '06D45', '#955d3f'],
      ['55', '06C37', '#aa7455'],
      ['78', '08C35', '#d5a972'],
      ['66', '06E56', '#bd6c37'],
      ['60', '06D44', '#b87042'],
      ['59', '06D43', '#cf8746'],
      ['54', '06C35', '#e1a77e'],
      ['58', '06D41', '#f9bf93'],
      ['53', '06C33', '#e5c29f'],
      ['77', '08C33', '#e1c29c'],
      ['75', '08B29', '#534b44'],
      ['74', '08B27', '#625248'],
      ['73', '08B25', '#78695e'],
      ['72', '08B23', '#8c7e71'],
      ['71', '08B21', '#a49587'],
      ['70', '08B19', '#b7aa99'],
      ['69', '08B17', '#d8c8b4'],
      ['68', '08B15', '#f1e6d5'],
    ],
  }, {
    name: 'Green',
    colors: [
      ['140', '12E55', '#73a647'],
      ['139', '12E53', '#98b747'],
      ['138', '12E51', '#c9d047'],
      ['134', '12D41', '#cad27c'],
      ['129', '12C33', '#c9cc96'],
      ['121', '12B17', '#c9cbac'],
      ['132', '12C39', '#535b3f'],
      ['137', '12D45', '#6a713e'],
      ['131', '12C37', '#7b8546'],
      ['136', '12D44', '#808738'],
      ['135', '12D43', '#8f9942'],
      ['130', '12C35', '#adb480'],
      ['156', '14E58', '#375248'],
      ['145', '14C39', '#425f52'],
      ['144', '14C37', '#648e78'],
      ['148', '14D43', '#4b8f70'],
      ['147', '14D41', '#8cbda1'],
      ['150', '14D45', '#2b604c'],
      ['149', '14D44', '#38795d'],
      ['155', '14E56', '#017d58'],
      ['154', '14E53', '#08936d'],
      ['153', '14E51', '#55ad79'],
      ['152', '14E50', '#a9d8ba'],
      ['151', '14E49', '#cfead6'],
      ['161', '16C35', '#9bb6b1'],
      ['160', '16C33', '#b3cdc9'],
      ['143', '14C35', '#9db4a3'],
      ['142', '14C33', '#b5cfbf'],
      ['141', '14C31', '#d7e5d7'],
      ['168', '16D45', '#1d5f61'],
      ['167', '16D44', '#1c7a79'],
      ['166', '16D43', '#378f8d'],
      ['171', '16E56', '#007a7a'],
      ['170', '16E53', '#039092'],
      ['165', '16D41', '#81bcb7'],
      ['169', '16E50', '#99d6d0'],
      ['163', '16C39', '#315e60'],
      ['162', '16C37', '#578988'],
      ['187', '18D41', '#87bcc8'],
      ['164', '16C40', '#404b4c'],
      ['146', '14C40', '#414d46'],
      ['159', '16A11', '#656c6b'],
      ['158', '16A07', '#919694'],
      ['133', '12C40', '#454940'],
      ['127', '12B29', '#474a41'],
      ['126', '12B27', '#585b4d'],
      ['125', '12B25', '#6b6d5c'],
      ['124', '12B23', '#7f836e'],
      ['123', '12B21', '#999d83'],
      ['122', '12B19', '#b0b395'],
      ['157', '16A03', '#c6cbc2'],
      ['2', '00A03', '#c7c8c3'],
      ['175', '18B19', '#b1b9b9'],
      ['174', '18B17', '#c3cccb'],
      ['182', '18C33', '#baccce'],
      ['191', '18E49', '#d3e5e2'],
      ['181', '18C31', '#e6e8e2'],
    ],
  }, {
    name: 'Purple',
    colors: [
      ['228', '22E58', '#4d4367'],
      ['226', '22D45', '#5b5184'],
      ['227', '22E53', '#6d6196'],
      ['225', '22D44', '#71689b'],
      ['220', '22C37', '#7d769b'],
      ['221', '22C39', '#595175'],
      ['224', '22D43', '#877fb0'],
      ['223', '22D41', '#afafd3'],
      ['219', '22C35', '#b0aec2'],
      ['218', '22C33', '#c7c5d5'],
      ['222', '22C40', '#4a4255'],
      ['216', '22B29', '#474451'],
      ['215', '22B27', '#5a5566'],
      ['214', '22B25', '#6a6773'],
      ['213', '22B23', '#82808a'],
      ['212', '22B21', '#96939c'],
      ['233', '24C40', '#514051'],
      ['232', '24C39', '#6a4d6d'],
      ['231', '24C37', '#9a7a97'],
      ['234', '24E50', '#e3c2d9'],
      ['237', '24E58', '#5b3d58'],
      ['236', '24E56', '#865086'],
      ['235', '24E53', '#8c5a8c'],
      ['230', '24C35', '#bfa9b9'],
      ['229', '24C33', '#d2c0cd'],
      ['211', '22B19', '#b2b2bc'],
      ['210', '22B17', '#c8c5ca'],
    ],
  }, {
    name: 'Red',
    colors: [
      ['42', '04D45', '#8e3d3d'],
      ['48', '04E56', '#bc373a'],
      ['46', '04E53', '#cc443c'],
      ['47', '04E55', '#cf4734'],
      ['41', '04D44', '#ab534e'],
      ['40', '04D43', '#c15f56'],
      ['45', '04E51', '#ee7563'],
      ['39', '04D41', '#e99d8d'],
      ['44', '04E50', '#febbad'],
      ['37', '04C39', '#7e4a46'],
      ['36', '04C37', '#ab6f67'],
      ['35', '04C35', '#e4a398'],
      ['34', '04C33', '#ebbdb4'],
      ['43', '04E49', '#f6d9d2'],
      ['17', '02C40', '#59434c'],
      ['38', '04C40', '#5a3f42'],
      ['49', '04E58', '#6e4146'],
      ['16', '02C39', '#7f4957'],
      ['15', '02C37', '#a86f7f'],
      ['24', '02E58', '#68394d'],
      ['21', '02D45', '#89395a'],
      ['23', '02E56', '#aa4567'],
      ['22', '02E53', '#ce5a7c'],
      ['20', '02D44', '#a94d69'],
      ['19', '02D43', '#c1647f'],
      ['18', '02D41', '#ee9ca8'],
      ['14', '02C35', '#dfa2ad'],
      ['13', '02C33', '#e7c0c4'],
      ['32', '04B29', '#544544'],
      ['57', '06C40', '#5c453e'],
      ['31', '04B27', '#6a5350'],
      ['30', '04B25', '#7e6763'],
      ['29', '04B23', '#947c75'],
      ['28', '04B21', '#ac948d'],
      ['27', '04B19', '#c5aca3'],
      ['26', '04B17', '#d8c3bb'],
      ['25', '04B15', '#edded6'],
      ['33', '04C31', '#f6e7e0'],
    ],
  }, {
    name: 'Blue',
    colors: [
      ['195', '18E58', '#2a4c61'],
      ['190', '18D45', '#235d75'],
      ['189', '18D44', '#38748d'],
      ['188', '18D43', '#47869d'],
      ['194', '18E53', '#00719e'],
      ['193', '18E51', '#41a1bf'],
      ['192', '18E50', '#abd2db'],
      ['208', '20E56', '#1b5d92'],
      ['207', '20E53', '#2c6eaa'],
      ['206', '20E51', '#659fd4'],
      ['185', '18C39', '#3a5a6a'],
      ['184', '18C37', '#5f8390'],
      ['183', '18C35', '#9bb1b9'],
      ['177', '18B23', '#7b8485'],
      ['176', '18B21', '#939c9d'],
      ['200', '20C40', '#384356'],
      ['199', '20C39', '#48566d'],
      ['204', '20D45', '#3a5b83'],
      ['203', '20D44', '#486d9e'],
      ['202', '20D43', '#5e84b3'],
      ['201', '20D41', '#9ab6d3'],
      ['205', '20E50', '#b6d1e9'],
      ['198', '20C37', '#6d85a2'],
      ['8', '00E53', '#3a3a3b'],
      ['180', '18B29', '#404448'],
      ['172', '18A14', '#464a4e'],
      ['7', '00A13', '#5a5b5c'],
      ['5', '00A09', '#818384'],
      ['186', '18C40', '#3d464d'],
      ['179', '18B27', '#525a5e'],
      ['178', '18B25', '#697176'],
      ['197', '20C35', '#a2b2c5'],
      ['196', '20C33', '#bbccdc'],
    ],
  }, {
    name: 'Grey',
    colors: [
      ['67', '08A14', '#464442'],
      ['104', '10B29', '#4a4741'],
      ['96', '10A11', '#696865'],
      ['6', '00A11', '#6a6a6a'],
      ['12', '02A11', '#716c6d'],
      ['52', '06A11', '#716f6e'],
      ['95', '10A09', '#878780'],
      ['51', '06A07', '#979692'],
      ['94', '10A07', '#9b9893'],
      ['11', '02A07', '#9e9b9a'],
      ['4', '00A07', '#9b9b9b'],
      ['3', '00A05', '#b0afae'],
      ['93', '10A05', '#b4b3a9'],
      ['92', '10A03', '#c6c5bd'],
      ['10', '02A03', '#ccc9c7'],
      ['50', '06A03', '#cfc9c1'],
      ['1', '00A01', '#d2d0ca'],
      ['217', '22C31', '#e4e2e1'],
      ['209', '22B15', '#e5e2de'],
      ['91', '10A01', '#eae9e1'],
      ['9', '00E55', '#f1f0e8'],
      ['173', '18B15', '#e3e6e0'],
    ],
  },
];
const mapColorCssToItem = new Map();
const mapCodeToCssColor = new Map();
const mapColorCssToCode = new Map();
const colorItems = [];
function initMaps() {
  colorsData0.forEach((obj) => {
    obj.colors.forEach((arr) => {
      const code = arr[1];
      const color = arr[2];
      mapColorCssToItem.set(color, arr);
      mapCodeToCssColor.set(code, color);
      mapColorCssToCode.set(color, code);
      colorItems.push(arr);
    });
  });
}
initMaps();

export default {
  props: {
    selectedColor: String,
    plateVisible: Boolean,
    setPlateVisible: Function,
    onColorSelected: Function,
    onClosed: Function,
  },
  components: {
    ElInput, ElButton, ElTooltip
  },
  setup(props, ctx) {
    let curItem = mapColorCssToItem.get(props.selectedColor) || ['0', '', '']
    const currrentCode = ref(curItem[1])
    const setCurrrentCode = (colorCode) => {
      currrentCode.value = colorCode
    }
    const currentColor = ref([])
    const setCurrentColor = (color) => {
      currentColor.value = color
    }
    setCurrentColor(curItem);

    const selectedColor = ref(curItem)
    const setSelectedColor = (color) => {
      selectedColor.value = color
    }
    const colorsData = ref(colorsData0)
    const setColorsData = (arr) => {
      colorsData.value = arr
    }
    watch(() => props.selectedColor, (val) => {
      // console.log('area color changed, ', val)
      curItem = mapColorCssToItem.get(props.selectedColor) || ['0', '', '']
      setCurrrentCode(curItem[1])
      setCurrentColor(curItem)
    })
    const searchTxt = ref('')
    const closeColorPlate = () => {
      setColorsData(colorsData0);
      props.setPlateVisible(false);
      if (props.onClosed) {
        props.onClosed();
      }
    };
    const confirmColorSelect = () => {
      setCurrentColor(selectedColor.value);
      props.onColorSelected(selectedColor.value[2]);
      closeColorPlate();
    }

    const onSearchColorCode = () => {
      const word = searchTxt.value.trim().toUpperCase();
      if (!word.length) {
        setColorsData(colorsData0);
        return;
      }
      const target = [];
      colorsData0.forEach((obj) => {
        const row = [];
        obj.colors.forEach((arr) => {
          const lcs = LCS(word, arr[1]);
          if (lcs === word.length) {
            row.push(arr);
          }
        });
        if (row.length) {
          target.push({ name: obj.name, colors: row });
        }
      });
      setColorsData(target);
    };
    watch(searchTxt, () => {
      onSearchColorCode()
    })

    return {
      Search,
      confirmColorSelect,
      closeColorPlate,
      onSearchColorCode,
      currentColor,
      selectedColor,
      setSelectedColor,
      currrentCode,
      setCurrrentCode,
      colorsData,
      searchTxt,
    }
  },
  template: `
  <div class="color-plate" v-show="plateVisible">
      <div class="color-plate-title">
        <span>Edit Colors</span>
        <span class="closure" @click="closeColorPlate">
          X
        </span>
      </div>
      <div class="color-plate-current">
        <span>Current:</span>
        <div
          class="plate-small-box"
          :style="{backgroundColor: currentColor.length ? currentColor[2] : 'black'}"
        />
        <span>{{currentColor.length ? currentColor[1] : '--'}}</span>
        <span class="splitter">Selected: </span>
        <div
          class="plate-small-box"
          :style="{backgroundColor: selectedColor.length ? selectedColor[2] : 'black'}"
        />
        <span>{{selectedColor.length ? selectedColor[1] : '--'}}</span>
      </div>
      <div class="color-plate-input">
        <span>Color Code:</span>
        <div>
          <el-input
            v-model="searchTxt"
            placeholder="Please input color code"
            style="width: 240px"
          clearable>
            <template #append>
              <el-button :icon="Search" @click='onSearchColorCode'/>
            </template>
          </el-input>
        </div>
      </div>
      <div class="color-plate-select-area">
        <div class="desc">Color:</div>
        <div class="empty" v-show="colorsData.length === 0">
          <img src="../assets/areaColorGrey.svg" alt="" width="54" height="54" />
          <span>No Data</span>
        </div>
        <div v-for="colorsObj in colorsData">
          <div class="color-group-name">{{colorsObj.name}}:</div>
          <div class="color-plate-select-rows">
            <el-tooltip v-for="arr in colorsObj.colors"
              :content="arr[1]"
            >
              <div class="cell-bg"
                @click="setSelectedColor(arr); setCurrrentCode(arr[1]);">
                <div :class="[currrentCode === arr[1] ? 'cell-current' : 'cell']"
                  :style="{ 'background-color': arr[2] }"
                />
              </div>
            </el-tooltip>
          </div>
        </div>
        
      </div>
      <div class="color-plate-bottom">
        <el-button @click="closeColorPlate">Cancel</el-button>
        <el-button type="primary" @click="confirmColorSelect">
          Ok
        </el-button>
      </div>
    </div>
  `
}
